<!-- 头像组件 -->
<template>
  <div class="com_avatar">
    <el-dropdown class="drop_memu" @command="commandHandler">
      <el-avatar shape="square" :size="40" :src="headUrl" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="1">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import Store from "@/store/index";
import { useRouter } from "vue-router";
//route对象
const router = useRouter();

//传递的头像信息
defineProps({
  headUrl: {
    type: String,
    default:
      "https://img2.baidu.com/it/u=1359702,3365247259&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=380",
  },
});
const store = Store();

//el-dropdown的点击回调事件
const commandHandler = (val) => {
  switch (parseInt(val)) {
    case 1:
      //退出登录
      //通过pinia来进行退出登录的操作
      store.useLogin.loginOut();
      router.replace("/login");
      break;
  }
};
</script>
<style lang="scss" scoped>
//这个样式是去掉el-dropdown的默认选中的黑色边框
.drop_memu :deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>
